<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">
    <link href="../lib/icons.css" rel="stylesheet">

    <title>Linked Block - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        .linked-block {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body class="cloak h-100-vh">
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
    <div class="app-bar-item-static no-hover">
        <div class="text-leader">Linked Block</div>
    </div>
    <div class="app-bar-item-static no-hover ml-auto">
        <input type="checkbox" data-role="theme-switcher"/>
    </div>
</nav>

<main class="h-100 pos-relative" style="--linked-block-point-color: #ff0000;">
    <div id="block1"
         data-role="linked-block"          
    >1</div>

    <div id="block2"
         data-role="linked-block"  
    >2</div>

    <div id="block3"
         data-role="linked-block"  
    >3</div>

    <div id="block4"
         data-role="linked-block" 
    >4</div>
</main>

<script src="../lib/metro.js"></script>
<script>
    setTimeout(() => {
        const block1 = $('#block1')
        const block2 = $('#block2')
        const block3 = $('#block3')
        const block4 = $('#block4')
        const parent = $('main')

        block1.css({
            top: parent.height() / 2 - block1.height() / 2 - 200,
            left: parent.width() / 2 - block1.width() / 2 - 200,
        })

        block2.css({
            top: parent.height() / 2 - block2.height() / 2 - 200,
            left: parent.width() / 2 - block2.width() / 2 + 200,
        })

        block3.css({
            top: parent.height() / 2 - block3.height() / 2 + 200,
            left: parent.width() / 2 - block3.width() / 2 - 200,
        })

        block4.css({
            top: parent.height() / 2 - block4.height() / 2 + 200,
            left: parent.width() / 2 - block4.width() / 2 + 200,
        })
    }, 100)
    
    $(document).on('click', ".linked-block", function() {
        const block = Metro.getPlugin($(this), 'linked-block')
        const sides = ["north", "east", "south", "west"];
        const sideIndex = Math.floor(Math.random() * sides.length);
        block.addPoint(sides[sideIndex]);
    })
</script>
</body>
</html>
